<template>
	<view class="content columnbox wdh-100">
		<view class="info-box columnbox wdh-100">
			<view class="info-title wdh-100">反馈类别</view>
			<view class="type-list wdh-100">
				<view @click="complaintType=item.value" v-for="(item,index) in complaintTypeList" :key='index'
					class="rowbox one-type" :class="{'sel-type':item.value==complaintType}">{{item.title}}
				</view>
			</view>
			<view class="info-title wdh-100">反馈内容</view>
			<view class="columnbox wdh-100 content-box">
				<textarea v-model="content" class="input-box" placeholder="请填写15字以上描述，以便我们更好地为您提供帮助~"></textarea>
				<view class="img-list wdh-100">
					<view class="one-img rowbox" v-for="(item,index) in imglist" :key='index'>
						<image mode="aspectFill" :src="item"></image>
					</view>
					<view @click="addImg" class="img-box rowbox">+</view>
				</view>
			</view>
			<view class="info-title wdh-100">联系方式</view>
			<view class="type-list wdh-100">
				<input v-model="phone" class="input-box" placeholder="请留下您的邮箱或者电话，方便我们联系您哦~" />
			</view>
		</view>
		<view class="wdh-100" style="height: 200rpx;"></view>
		<view class="bottom-box wdh-100 rowbox">
			<view class="wdh-100 send-btn rowbox" @click="submitInfo">提交投诉</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				complaintTypeList: [{
						title: 'BUG',
						value: 0
					},
					{
						title: '建议',
						value: 1
					},
					{
						title: '吐槽',
						value: 2
					}
				],
				complaintType: 0,
				content: '',
				imglist: [],
				phone: '',
				submitflag: false
			};
		},
		methods: {
			showRecord() {
				uni.navigateTo({
					url: './record'
				})
			},
			async submitInfo() {
				if (this.content == '') {
					uni.showToast({
						title: '请输入投诉内容',
						icon: 'none'
					})
					return false
				} else if (this.phone == '') {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none'
					})
					return false
				}
				if (!this.submitflag) {
					this.submitflag = true
					uni.showLoading({
						title: '正在提交'
					})
					let list = []
					for (var i = 0; i < this.imglist.length; i++) {
						list.push(await this.sendImg(this.imglist[i], i))
					}

					let data = {
						id:'',//用户id
						feedbackType: this.complaintType,
						feedbackContent: this.content,
						feedbackPhone: this.phone,
						url: list.join(',')
					}
					console.log(data)
					this.$req.post('/xcx/feedback', data).then(res => {
						console.log(res)
						uni.hideLoading()
						this.submitflag = false
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if (res.data.code == 200) {
							uni.navigateBack()
						}
					})
				}
			},
			sendImg(url, index) {
				return new Promise(resolve => {
					this.$req.uploadImg(url).then(res => {
						if (index == this.imglist.length - 1) {
							resolve(res.data.url)
						} else {
							setTimeout(() => {
								resolve(res.data.url)
							}, 5000)
						}
					})
				})
			},
			addImg() {
				uni.chooseImage({
					success: (res) => {
						this.imglist = this.imglist.concat(res.tempFilePaths)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #f7f8fa;
		min-height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC;
		width: 100%;
		overflow: hidden;
	}

	.info-box {
		padding: 0 32rpx;
	}

	.info-title {
		padding: 20rpx 0;
		padding-bottom: 10rpx;
		font-size: 32rpx;
		margin-top: 20rpx;
	}

	.q-box {
		background: #fff;
		border-radius: 10rpx;
		margin-top: 10rpx;
		padding: 20rpx 20rpx;
		color: #17698F;
		font-size: 28rpx;
	}

	.type-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 10rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
	}

	.one-type {
		background: #f8f8f8;
		color: #9d9e9d;
		font-size: 28rpx;
		border: #bfc1c1 solid 1px;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.sel-type {
		border: #17698F solid 1px;
		color: #17698F;
	}

	.input-box {
		font-size: 28rpx;
		width: 100%;
	}

	.content-box {
		background: #fff;
		border-radius: 10rpx;
		margin-top: 10rpx;
		padding: 20rpx 20rpx;
		width: 100%;
	}

	.img-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		width: 100%;
	}

	.img-box {
		width: 150rpx;
		height: 150rpx;
		border: #B2B2B2 dotted 1px;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.one-img {
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
		}
	}

	.send-btn {
		border-radius: 100rpx;
		margin-top: 40rpx;
	}

	.r-btn {
		color: #17698F;
		font-size: 28rpx;
		width: 100%;
		text-align: center;
		margin: 40rpx 0;
	}
</style>